<template>
	<div>
		<div
			class="demo-page-header"
			style="background-color: #f5f5f5; padding: 24px"
		>
			<a-page-header
				:ghost="ghost"
				title="Title"
				sub-title="This is a subtitle"
				@back="() => $router.go(-1)"
			>
				<template #extra>
					<a-button
						key="1"
						type="primary"
						@click="showModal"
						disabled
						>待开发
					</a-button>
					<a-button key="2" disabled>Operation</a-button>
					<a-button
						key="3"
						type="primary"
						disabled
						>Primary
					</a-button>
				</template>
<!--				<a-descriptions-->
<!--					size="small"-->
<!--					:column="3"-->
<!--				>-->
<!--					<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>-->
<!--					<a-descriptions-item label="System time">-->
<!--					{{Date.}}-->
<!--					</a-descriptions-item>-->
<!--					<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>-->
<!--					<a-descriptions-item label="Remarks"> Gonghu Road, Xihu District, Hangzhou, Zhejiang, China </a-descriptions-item>-->
<!--				</a-descriptions>-->
			</a-page-header>
		</div>
		<p class="charts-container">
			<top-invoked-chart class="chart-item" />
			<recent-invoke-count-chart class="chart-item" />
		</p>
	</div>
</template>
<script setup lang="ts">
import TopInvokedChart from '@/components/TopInvokedChart.vue';
import RecentInvokeCountChart from '@/components/RecentInvokeCountChart.vue';
</script>

<style scoped>
.demo-page-header :deep(tr:last-child td) {
	padding-bottom: 0;
}
.charts-container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	min-height: 600px;
	border: 1px solid black;
}

.chart-item {
	height: 100%;
	flex: 1 1 40%;
}
</style>
